<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>User application</title>
<link rel="stylesheet" href="css/main.css" />
<script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"></script>
<script type="text/javascript" src="xui.js"></script>
<script type="text/javascript" src="jquery-1.5.min.js"></script>
<script type="text/javascript" src="jquery.scrollTo-min.js"></script>
<script type="text/javascript" src="templating.js"></script>

</head>
<body>
	<div id="provsList">
		<p>This Providers are available. Please choose.</p>
	</div>
	<div id="timeOutDiv">
		<label>Enter time out please: </label></br> <input id="timeOut" type="text"
			value="100" />
		<button id="enterTimeOut" class="buttn">OK</button>
	</div>

</body>
</html>
<script type="text/javascript">
	var lastReceived = 0;
	var curentIP = "10.0.2.2:9000";
	var waitEvents = "http://" + curentIP + "/user/waitEvents";
	var chooseProv = "http://" + curentIP + "/user/chooseProv";
	var canceled = "http://" + curentIP + "/user/cancel";
	var userDeclare = "http://" + curentIP + "/user/declare";
	var userConfirmed = "http://" + curentIP + "/user/confirmed";
	var signIn = "http://" + curentIP + "/user/signIn";
	var userId;
	var provId;
	var deviceSn = 'test111';

	document.getElementById("timeOutDiv").style.display = 'none';

	provsList = document.getElementById("provsList");
	$.ajax({
		url : "http://" + curentIP + "/user/signIn",
		data : {
			'deviceSn' : deviceSn
		},
		success : function(events) {

			var provsId = events.provsId;
			var coordinates = events.coordinates;

			for (id in provsId) {
				addNewProv(provsId[id], coordinates[id]);
			}
			manager();
		},
		dataType : 'json'
	});

	function manager() {
		// Retrieve new messages

		var getEvents = function() {
			$.ajax({
				url : waitEvents,
				data : {
					lastReceived : lastReceived
				},
				success : function(events) {
					$(events).each(function() {
						lastReceived = this.id;
						eventManager(this.data);
					})
					getEvents()
				},
				dataType : 'json'
			});
		}
		getEvents();

		function eventManager(event) {
			if (event.status == "u_requested") {
				document.getElementById(event.provId).style.backgroundColor = "orange";
			}

			if ((event.status == "p_declared") && (event.userId == userId)) {
				if (!document.getElementById(event.provId)) {
					addNewProv(event.provId, event.coordinates);
					document.getElementById(event.provId).style.backgroundColor = "green";
				}
			}
			if (event.status == "u_confirmed") {
				if (provId == event.provId) {
					alert("Sorry, but provider choose another user. Please select new provider");
				}
				$('#' + event.provId).remove();
			}
			if (event.status == "p_accepted") {
				if (confirm("Prov - accept. His data: inf - "
						+ event.serviceInf + " time - " + event.time)) {
					$.post(userConfirmed, {
						provId : provId
					});
				} else {
					alert("Please choose new provider");
					$.post(canceled, {
						provId : provId
					});
					delProv(provId);
				}
			}
			if ((event.status == "p_acceptedCanceled")
					&& (event.provId == provId)) {
				alert("Provider with id " + event.provId
						+ " don't accept request");
				delProv(provId);
			}
			if (event.status == "u_canceled") {
				alert("You don't confirm request for provider with id "
						+ event.provId);
				delProv(provId);
			}
			if (event.status == "p_locked") {
				alert('You was locked');
				document.getElementById(provId).style.backgroundColor = "red";
			}
			if (event.status == "p_reached") {
				alert('Prov reached distance');
				$.get("http:/10.0.2.2:9000/secure/logout");
				window.location = "index.html";
			}
		}

	}

	function selectProv(id) {
		provId = id;
		document.getElementById("timeOutDiv").style.display = 'inline';
		document.getElementById("provsList").style.display = 'none';
	};

	$('#enterTimeOut').click(function() {
		var timeOut = $("#timeOut").val();
		document.getElementById("timeOutDiv").style.display = 'none';
		document.getElementById("provsList").style.display = 'inline';
		$.post(chooseProv, {
			provId : provId,
			userId : userId,
			timeOut : timeOut
		});
	});

	function addNewProv(id, coordinates) {
		var prov = document.createElement("div");
		prov.className = "provs";
		prov.setAttribute('name', 'prov');
		prov.setAttribute('id', id);
		prov.setAttribute('onClick', "selectProv(this.id);");
		prov.innerHTML = "Prov #" + id + "<br/>lat=" + coordinates.x + " long="
				+ coordinates.y;
		provsList.appendChild(prov);
	}

	function delProv(provId) {
		elem = document.getElementById(provId);
		provsList.removeChild(elem);
	}
</script>